<%= include ic/header.html %>
<style>
#nav_my{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;height:100%;overflow:hidden;}
#content{width:100%;height:100%;margin:auto;overflow:hidden;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#content .step{height:100%;}
#step1 .am-btn{height:50px;padding:0 50px;background:#111;color:#fff;border-radius:25px;}
#step1{}
#step2{padding-top:20px;display:none;}
#imagedata{padding:0;}
#imagedata .am-form-group{height:50px;line-height:50px;background:#111;margin-bottom:2px;color:#eee;text-align:left;position:relative}
#imagedata .am-form-group .label{width:30%;padding-left:5%;margin:0;border-right:1px solid #ccc;line-height:40px;}
#imagedata .am-form-group .select{width:68%;height:50px;line-height:50px;background:#111;border:0;margin:0;position:absolute;top:0;right:0;cursor:pointer;}
#imagedata .am-form-group .select:focus{outline:0px;}
#imagedata .am-checkbox{text-align:left;font-size:1.6rem;line-height:2rem;}
#imagedata .am-checkbox label input{margin-top:6px;}
#btnDone{height:40px;padding:0 40px;background:#111;line-height:40px;color:#fff;border-radius:20px;float:left;margin-bottom:20px;cursor:pointer;}
#ctrlBar span{height:60px;line-height:70px;float:left;padding-left:15px;}
#ctrlBar span a{color:#444;font-size:2rem;}
#imagelist{text-align:left;}
#imgList>li{overflow:hidden;border:15px solid #f7f7f7;cursor:pointer;padding-top:0;position:relative;text-align:right;color:#0e0;font-size:2rem;}
#imgList>li img{width:auto;height:auto;}
#imgList>li .success{width:100%;position:absolute;bottom:0;right:5px;display:none;}
#imgList>li.s .success{display:block;}
.am-modal{background:none;color:#fff;}
.am-modal-dialog{background:none;}
</style>
<div id="main" class="am-cf">
<div id="content">
  <div id="step1" class="step am-vertical-align">
    <div class="am-form-group am-form-file am-vertical-align-middle">
      <button type="button" class="am-btn am-center">Choose from your computer</button>
      <input id="doc-form-file" type="file" accept="image/png,image/gif,image/jpeg" multiple>
    </div>
  </div>
  <div id="step2" class="step am-g ml15-2">
    <div id="btnBack"><a href="javascript:back();"><i class="am-icon-caret-left"></i> BACK</a></div>
    <div class="am-cf"></div>
    <div id="imagedata" class="am-u-sm-12 am-u-md-6">
      <div class="am-form-group">
        <label for="val-airline" class="label">Airline*</label>
        <select id="val-airline" class="select">
          <option value="" selected></option>
          <% if(tag && tag.Airline){ %>
          <% for(var i=0;i<tag.Airline.length;i++){ %>
            <option value="<%= tag.Airline[i] %>"><%= tag.Airline[i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-acType" class="label">A/C Type*</label>
        <select id="val-acType" class="select">
          <option value="" selected></option>
          <% if(tag && tag['A/C Type']){ %>
          <% for(var i=0;i<tag['A/C Type'].length;i++){ %>
            <option value="<%= tag['A/C Type'][i] %>"><%= tag['A/C Type'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-classes" class="label">Class*</label>
        <select id="val-classes" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Class']){ %>
          <% for(var i=0;i<tag['Class'].length;i++){ %>
            <option value="<%= tag['Class'][i] %>"><%= tag['Class'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-flightNo" class="label">Flight No.</label>
        <select id="val-flightNo" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Flight No.']){ %>
          <% for(var i=0;i<tag['Flight No.'].length;i++){ %>
            <option value="<%= tag['Flight No.'][i] %>"><%= tag['Flight No.'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-from" class="label">From</label>
        <select id="val-from" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Airport']){ %>
          <% for(var i=0;i<tag['Airport'].length;i++){ %>
            <option value="<%= tag['Airport'][i] %>"><%= tag['Airport'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-form-group">
        <label for="val-to" class="label">To</label>
        <select id="val-to" class="select">
          <option value="" selected></option>
          <% if(tag && tag['Airport']){ %>
          <% for(var i=0;i<tag['Airport'].length;i++){ %>
            <option value="<%= tag['Airport'][i] %>"><%= tag['Airport'][i] %></option>
          <% } %>
          <% } %>
        </select>
      </div>
      <div class="am-checkbox">
        <label>
          <input id="checkbox" type="checkbox"> Create a Album
        </label>
      </div>
      <div class="am-cf">
        <div id="btnDone" onclick="upload()">Done</div>
      </div>
      <div class="am-cf"></div>
    </div>
    <div id="imagelist" class="am-u-sm-12 am-u-md-6">
      <div style="padding-left:15px;">Click photos to remove</div>
      <ul id="imgList" class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-cf">
      </ul>
    </div>
  </div>
</div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
var fileArr=[],album,imageArr=[];
var airline,acType,classes,flightNo,from,to;
$(function() {
  $("#step1").css("height",$("body").height()
    - $(".am-topbar").height()*2+"px");
  $(window).resize(function(){
    $("#step1").css("height",$("body").height()
      - $(".am-topbar").height()*2+"px");
    fixImg();
  });
  $('#doc-form-file').on('change', function() {
    $("#imgList").html("");
    $("#step1").hide();
    fileArr=this.files;
    loadImg(this.files,0);
    $("#step2").show();
  });
});

function loadImg(files,index){
  var reader = new FileReader();
  reader.onload=function(){
    //console.log(this.result);
    $("#imgList").append('<li data-index="'+index+'" onclick="remove(this)"><img data-index="'+index+'" src="'+this.result+'"  onload="fixImg()" ><div class="success"><i class="am-icon-check"></i></div></li>');
    index++;
    if(index<files.length)loadImg(files,index);
  }
  reader.readAsDataURL(files[index]);
}

function fixImg(){
  $("#imgList>li").height($("#imgList div").first().width());
  $("#imgList>li").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("img").width()/$(this).children("img").height()>1){
      $(this).children("img").height(w);
      $(this).children("img").css("width","auto");
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
    }
  });
}

function back(){
  $("#step2").hide();
  $("#step1").show();
}

function remove(obj){
  $(obj).remove();
}

function upload(){
  airline   = $("#val-airline").val();
  acType    = $("#val-acType").val();
  classes   = $("#val-classes").val();
  flightNo  = $("#val-flightNo").val();
  from      = $("#val-from").val();
  to        = $("#val-to").val();
  postImg   = function(id){
    var imgArr  = $("#imgList li img");
    var length  = imgArr.length;
    for(var i=0;i<length;i++){
      uploadImage(fileArr[i],album,$(imgArr[i]).data("index"));
    }
  }
  //console.log(airline);

  if(!airline || airline.length==0){
    mAlert({title:"Tips",text:"【Airline】 is required!"})
  }else if(!acType || acType.length==0){
    mAlert({title:"Tips",text:"【A/C Type】 is required!"})
  }else if(!classes || classes.length==0){
    mAlert({title:"Tips",text:"【Class】 is required!"})
  }else{
    $('#my-modal-loading').modal({closeViaDimmer:false});
    postImg();
  }
}

function uploadImage(file,album,index) {
	var fd = new FormData();
	fd.append("uploadImg", file);
	var xhr = new XMLHttpRequest();
	xhr.upload.addEventListener("progress", function(evt){
		if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded/ evt.total);
      //progress.set(percentComplete);
    }
	}, false);
	xhr.addEventListener("load", function(evt){
    console.log(evt.target.responseText);
		var img=eval('('+evt.target.responseText+')');
		if(img.success){
      //console.log(fileArr.length-1);
      //console.log(img.index);
      //console.log(img.index==(fileArr.length-1));
      $("#imgList>li[data-index='"+img.index+"']").addClass("s");
      imageArr.push(img.id);
      if($("#imgList>li.s").size()==$("#imgList>li").size()){
        if($("#checkbox").is(":checked")){
          $.post("/my/createalbum",{
            imgs:imageArr,
            airline:airline,
            acType:acType,
            classes:classes,
            flightNo:flightNo,
            from:from,
            to:to
          },function(result){
            //console.dir(result);
            if(result && result.success){
              gotoUrl('/my/album/detail?id='+result.id);
            }else{
              $('#my-modal-loading').modal('close');
              mAlert({title:"Error",text:result.error});
            }
          },"json");
        }else{
          gotoUrl('/my/photostream');
        }

      }
			//mAlert({title:"Tips",text:"Success！"});
		}else{
      $('#my-modal-loading').modal('close');
			mAlert({title:"Error",text:img.error});
		}
	}, false);
	xhr.addEventListener("error", function(evt){
    $('#my-modal-loading').modal('close');
		mAlert({title:"Error",text:img.error});
	}, false);
	xhr.addEventListener("abort", function(evt){
	}, false);
	xhr.open("POST", "/my/upload?album="+album+"&index="+index+"&ajax="+true
  +"&airline="+airline
  +"&acType="+acType
  +"&classes="+classes
  +"&flightNo="+flightNo
  +"&from="+from
  +"&to="+to);
	xhr.send(fd);
}
</script>
